<template>
    <div>
   
    修改密码
    
    </div>
  </template>
  
  <script setup>
  import {ElMessage, ElMessageBox} from "element-plus";
  import {onMounted, reactive, ref} from "vue";
  import ImgsUpload from "@/components/img/imgsUpload/index.vue"
  import ImgsShow from "@/components/img/imgShow/index.vue"
  import {
    getUserPage,
    updateUser,
    deletedUser,
    addUser,
    getUserById
  } from "@/api/user";
  import {useUserStore} from "@/stores/userStores";
  import {getDepartList} from "@/api/depart";
  const tableData = reactive({
    records: [],
    orderBy: '',
    pages: 0,
    page: 1,
    size: 10,
    query: {}
  });
  const form = ref({
    id: '', //用户id
    depId: '', //部门id
    userName: '', //用户名
    password: '', //密码
    phone: '', //电话
    role: '', //角色id
    departRole: '', //部门角色（经理、普通员工）
    createTime: '', //创建时间
  });
  //------------选择框------------------------
  const options = [
    {
      value: 'Option1',
      label: 'Option1',
    },
    {
      value: 'Option2',
      label: 'Option2',
      disabled: true,
    },
  
  ];
  
  //------------基本常量------------------------
  const userStore = useUserStore();
  const token = userStore.token;
  const detailDialog = ref(false);
  const editDialog = ref(false);
  const addDialog = ref(false);
  
  // --------图片相关----------
  const imgList = ref([])
  const changeImgList = (array) => {
    imgList.value = array;
    form.value.pictures = JSON.stringify(array);
  }
  
  const dealImgJson = () => {
    // 图片处理
    console.log("拿到的图片值", form.value.pictures)
    if ('' != form.value.pictures && null != form.value.pictures) {
      imgList.value = JSON.parse(form.value.pictures.replace(/[\\]/g, ''));
    }
  }
  
  // ------------------- 搜索操作 ------------------------
  
  const allList = ref([]);
  const loadAllList =async () =>{
  const res = await getDepartList();
  allList.value = res.data
  
  }
  
  const searchData = ref({
    //用户id
    id: {
      key: 'id',
      sqlKeyword: 'EQ',
      value: ''
    },
    //部门id
    depId: {
      key: 'depId',
      sqlKeyword: 'EQ',
      value: ''
    },
    //用户名
    userName: {
      key: 'user_name',
      sqlKeyword: 'LIKE',
      value: ''
    },
    //密码
    password: {
      key: 'password',
      sqlKeyword: 'EQ',
      value: ''
    },
    //电话
    phone: {
      key: 'phone',
      sqlKeyword: 'LIKE',
      value: ''
    },
    //角色id
    role: {
      key: 'role',
      sqlKeyword: 'EQ',
      value: ''
    },
    //部门角色（经理、普通员工）
    departRole: {
      key: 'depart_role',
      sqlKeyword: 'EQ',
      value: ''
    },
    //创建时间
    createTime: {
      key: 'createTime',
      sqlKeyword: 'EQ',
      value: ''
    },
  
  });
  
  function clearnSearch() {
    searchData.value.id.value = '';
    searchData.value.depId.value = '';
    searchData.value.userName.value = '';
    searchData.value.password.value = '';
    searchData.value.phone.value = '';
    searchData.value.role.value = '';
    searchData.value.departRole.value = '';
    searchData.value.createTime.value = '';
    loadData();
  
  }
  
  
  /**
   * 查看详情
   * */
  const openDetail = async (id) => {
    const res = await getUserById(id);
    form.value = res.data;
    // 图片处理
    dealImgJson();
    detailDialog.value = true;
  }
  
  /**
   * 打开编辑按钮
   */
  const openEdit = async (id) => {
    const res = await getUserById(id);
    form.value = res.data;
    // 图片处理
    dealImgJson();
    editDialog.value = true;
  };
  
  /**
   *修改
   */
  const edit = async () => {
    const res = await updateUser(form.value);
    ElMessage.success("修改成功");
    editDialog.value = false;
    loadData();
    resetForm();
  };
  
  /**
   *添加
   */
  const add = async () => {
    const res = await addUser(form.value);
    ElMessage.success("添加成功");
    addDialog.value = false;
    loadData();
    resetForm();
  };
  
  /**
   * 删除数据
   */
  const deleted = async (id) => {
    ElMessageBox.confirm("是否确认删除？", "提示", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
    }).then(async () => {
      const res = await deletedUser({id});
      ElMessage.success("success");
      loadData();
    });
  };
  
  /**
   * 重置表单
   */
  const resetForm = () => {
    if (addDialog.value) {
      addDialog.value = false;
    }
    if (editDialog.value) {
      editDialog.value = false;
    }
    if (detailDialog.value) {
      detailDialog.value = false;
    }
    form.value = {};
    // 图片处理
    imgList.value = [];
  };
  
  const loadData = async () => {
    tableData.query = searchData.value;
    const res = await getUserPage(tableData);
    tableData.records = res.data.list;
    tableData.page = res.data.page;
    tableData.pages = res.data.pages;
    loadAllList();
  };
  onMounted(() => {
    // 初始加载分页数据
    loadData(tableData);
  });
  </script>
  
  <style scoped>
  
  .search-line {
    display: flex;
    margin-bottom: 10px;
    text-align: center;
    line-height: 35px;
  }
  
  </style>
  
  